<template>
	<div class="view">
		<div class="item">
			<uni-list>
				<uni-list-item @click="to('/pages/MinePages/userInfo/main')" title="修改资料" link />
				<uni-list-item v-if="isLogin && !user.parentId" @click="to('/pages/MinePages/bind/index')" title="绑定邀请人" link />
			</uni-list>
		</div>
		<div class="item">
			<uni-list>
				<uni-list-item @click="to('/pages/other/article/article?type=6')" title="服务协议" link />
				<uni-list-item @click="to('/pages/other/article/article?type=4')" title="隐私政策" link />
				<!-- <uni-list-item @click="clear()" title="清除缓存" :value="currentSize + 'kb'" link /> -->
			</uni-list>
		</div>
		<div class="item">
			<uni-list>
				<!-- <uni-list-item @tap="openSetting" title="授权设置" link /> -->
				<uni-list-item @click="to('/pages/MinePages/share/index')" title="分享好友" link />
				<uni-list-item @click="to('/pages/other/article/article?type=5')" title="关于我们" link />
			</uni-list>
		</div>

		<div v-if="isLogin" class="Btn" @click="logout()">
			<p>退出登录</p>
		</div>
	</div>
</template>
<script>
	import {
		clearStorage,
		openSetting,
		getLocation,
		reverseGeocoder
	} from "@/components/public.js"
	import {
		getUserInfo
	} from "@/apis/request.js";

	export default {
		data() {
			return {
				user: {},
				isLogin: true,
				currentSize: ""
			};
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true;
				this.userInfo();
			} else {
				this.isLogin = false;
				this.user = {};
			}
		},
		methods: {
			init() {
				this.getStorage();
			},
			userInfo() {
				getUserInfo().then(res => {
					this.user = res
				});
			},
			logout() {
				this.$dialog("提示", "是否确认退出?").then(() => {
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					uni.redirectTo({
						url: "/pages/LoginPages/mylogin/main"
					});
				});
			},
			openSetting() {
				openSetting(async res => {
					const userLocation = res.authSetting["scope.userLocation"];
					if (userLocation) {
						const {
							latitude,
							longitude
						} = await getLocation();
						reverseGeocoder(latitude, longitude);
					}
				});
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
			getStorage() {
				uni.getStorageInfo({
					success: res => {
						this.currentSize = res.currentSize;
					}
				});
			},
			clear() {
				this.$dialog(
					"清除缓存",
					"清理缓存需要一点时间，清理过程中请耐心等待"
				).then(async res => {
					await clearStorage();
					this.getStorage();
				});
			}
		},
		onLoad() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.view {
		button {
			border: none;
			padding: 0;
			text-align: unset;
		}

		position: fixed;
		width: 100%;
		background-color: #f1efef;

		.item {
			margin-bottom: 20rpx;

			.option {
				width: 100%;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: space-between;
				height: 90rpx;
				border-radius: 0;
				background-color: #FFF;

				&::after {
					border-radius: 0;
					border: none;
					border-top: 1rpx solid #F1F1F1;
				}

				.title {
					font-size: 28rpx;
					color: #333333;
				}

				.icon {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}

		.share {
			margin-top: 25rpx;
			padding: 10rpx 25rpx;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			background: #ffffff;
		}

		.Btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			position: fixed;
			height: 89rpx;
			background: #ffffff;
			bottom: 0;
			color: #ff290b;
			font-size: 30rpx;
			z-index: 1;
			border-top: 1rpx solid #dcdcdc;
		}
	}
</style>